import React from './react';
import ReactDOM from './react-dom';
/**
 * 1.组件的数据来源有两个，一个是伏组件的props，props是不可变得。第二个是组件的state
 * state的更新会被合并
 * react他可能会把多个setstate合并为一次调用
 * react可能是异步的，
 * react能够管理的范围内比如事件函数，生命周期内是异步
 * 除此之外在定时器，原生事件都是同步的
 */

// let isBatchUpdate = false
class ClassComponent extends React.Component{
  constructor(props){
    super(props)
    this.state={
      number:0
    }
  }
  handelClick = (mount,e)=>{
    debugger
    console.log(e)
    this.setState((state)=>({
      number:state.number+1
    }))
    this.setState((state)=>({
      number:state.number+1
    }))
    // this.setState({
    //   number:this.state.number+1
    // })
    // console.log(this.state.number)
    // this.setState({
    //   number:this.state.number+1
    // })
    console.log(this.state.number)
    // setTimeout(()=>{
    //   // debugger
    //   this.setState({
    //     number:this.state.number+1
    //   })
    //   console.log(this.state.number)
    //   this.setState({
    //     number:this.state.number+1
    //   })
    //   console.log(this.state.number)
    // })
  }
  handelParentClick =()=>{
    console.log('handelParentClick')
  }
  render(){
    return(
      <div onClick={this.handelParentClick} className="title" style={{ color: 'red' }}><span>{this.props.name}<p>{this.state.number}</p><button onClick={(event)=>this.handelClick(5,event)}>+</button></span>{this.props.children}</div>
    )
  }
}
let element = <ClassComponent name="hello">world</ClassComponent>


ReactDOM.render(
  element,
  document.getElementById('root')
);
